<template>
  <div class="home-container">
    <!-- <div v-show="!hideActionBar" class="actionbar elevation-1">
      <div class="left">
      </div>
      <div class="title">{{ title }}</div>
      <div class="right"></div>
    </div> -->

    <keep-alive>
      <router-view class="home-router" />
    </keep-alive>

    <cube-tab-bar class="bottom-tab" v-model="selectedTab" @change="onTabChange">
      <cube-tab v-for="(item, index) in tabs" :label="item.value" :key="item.label">
        <span class="count" v-if="index === 0">

        </span>
        <!-- name为icon的插槽 -->
        <img slot="icon" :src="selectedTab === item.value ?  item.selectedIcon : item.icon" class="icon" />
        <!-- 默认插槽 -->
        <div class="tab-title">{{item.label}}</div>
      </cube-tab>
    </cube-tab-bar>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { RawLocation } from "vue-router";

@Component
export default class Home extends Vue {
  private title: string = "首页";

  // private tabArray: Array<string> = ['Chat', 'Discover', 'My'];

  private tabs: Array<any> = [
    {
      value: "Chat",
      label: "群聊",
      icon: require('@/assets/images/group.png'),
      selectedIcon: require('@/assets/images/group_selected.png'),
    },
    // {
    //   value: "Discover",
    //   label: "发现",
    //   icon: require('@/assets/images/discover.png'),
    //   selectedIcon: require('@/assets/images/discover_selected.png'),
    // },
    {
      value: "My",
      label: "我的",
      icon: require('@/assets/images/my.png'),
      selectedIcon: require('@/assets/images/my_selected.png'),
    }
  ];

  private get hideActionBar() {
    let path = this.$route.name
    return path === 'Me' || path === 'Chat';
  }

  private selectedTab: string = 'Chat';

  /**
   * 生命周期函数
   */
  protected mounted() {
    let routeName: any = this.$route.name;
    this.selectedTab = routeName;
  }

  private onTabChange(value: string) {
    this.$router.push({
      name: value,
    });

    this.selectedTab = value;
  }
}
</script>

<style lang="stylus" scoped>
.home-container
  width 100%
  height 100%
  &.no-actionbar
    padding-top 0
  
  .actionbar
    height 48px
    width 100%
    position fixed
    top 0
    left 0
    background-color #fcfcfc
    display flex
    align-items center
    justify-content space-between
    z-index 999
    .left,
    .right
      align-items center
      justify-content center
      display flex
      width 3rem
      height 100%
      img
        width 16px
        height 16px
    .title
      font-size 18px
    
  
  .home-router
    width 100%
    height calc(100% - 48px)
    padding-bottom 48px
    position absolute
    box-sizing border-box
    background-color #f3f3f3
  
  .bottom-tab
    display flex
    justify-content space-between
    align-items center
    height 56px
    width 100%
    position fixed
    bottom 0
    left 0
    border-top 0.8px solid #e5e5e5
    // box-shadow 0 0 4px 0.5px rgba(0, 0, 0, 0.3)
    background-color rgb(250, 250, 250)
    .tab-title
      font-size 11px
      margin-top 4px
    .icon 
      width 22px
      height 22px
</style>

